<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Base 基本 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-lg-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            标题 <small>副标题</small>
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--bordered">
                <div class="card-body">

                    <!--begin::Card-->
                    <div class="card card--bordered">
                        <div class="card-head">
                            <div class="card-head-label">
                                <h3 class="card-head-title">
                                    带边框
                                </h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                            <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                                的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        </div>
                    </div>
                    <!--end::Card-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--head-lg ">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用大尺寸标题 <small>副标题</small>
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="dropdown dropdown-inline">
                            <button type="button" class="btn btn-clean btn-icon" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                <i class="flaticon-more-1"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <ul class="e-nav">
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-line-chart"></i>
                                            <span class="e-nav-link-text">Reports</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-send"></i>
                                            <span class="e-nav-link-text">Messages</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-pie-chart-1"></i>
                                            <span class="e-nav-link-text">Charts</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-avatar"></i>
                                            <span class="e-nav-link-text">Members</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-settings"></i>
                                            <span class="e-nav-link-text">Settings</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--head-xl ">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用特大尺寸标题 <small>副标题</small>
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="dropdown dropdown-inline">
                            <a href="#" class="btn btn-default btn-icon" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                <i class="flaticon-more-1"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <ul class="e-nav">
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-line-chart"></i>
                                            <span class="e-nav-link-text">Reports</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-send"></i>
                                            <span class="e-nav-link-text">Messages</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-pie-chart-1"></i>
                                            <span class="e-nav-link-text">Charts</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-avatar"></i>
                                            <span class="e-nav-link-text">Members</span>
                                        </a>
                                    </li>
                                    <li class="e-nav-item">
                                        <a href="#" class="e-nav-link">
                                            <i class="e-nav-link-icon flaticon2-settings"></i>
                                            <span class="e-nav-link-text">Settings</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon2-graph-1"></i>
                        </span>
                        <h3 class="card-head-title">
                            带图标的标题 <small>副标题</small>
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon2-graph"></i>
                        </span>
                        <h3 class="card-head-title">
                            带底部
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
                <div class="card-foot">
                    <div class="row align-items-center">
                        <div class="col-lg-6 m--valign-middle">
                            底部
                        </div>
                        <div class="col-lg-6 e-align-right">
                            <button type="submit" class="btn btn-brand">提交</button>
                            <span class="e-margin-left-10">or <a href="#" class="e-link e-font-bold">取消</a></span>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon-multimedia"></i>
                        </span>
                        <h3 class="card-head-title">
                            内容带滚动条
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-scroll" data-scroll="true" data-height="200" data-scrollbar-shown="true">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
                <div class="card-foot">
                    <div class="row align-items-center">
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-success">提交</button>
                            <button type="submit" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon-statistics"></i>
                        </span>
                        <h3 class="card-head-title">
                            顶部操作按钮
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-clean btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-add-1"></i>
                            </a>
                            <a href="#" class="btn btn-clean btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-maps"></i>
                            </a>
                            <a href="#" class="btn btn-clean btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-power"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--skin-solid e-bg-danger">
                <div class="card-head card-head--no-border">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon2-graphic"></i>
                        </span>
                        <h3 class="card-head-title">
                            错误
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-outline-light btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-add-1"></i>
                            </a>
                            <a href="#" class="btn btn-outline-light btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-maps"></i>
                            </a>
                            <a href="#" class="btn btn-outline-light btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-power"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card card--skin-solid card-- e-bg-brand">
                <div class="card-head">
                    <div class="card-head-label">
                        <span class="card-head-icon">
                            <i class="flaticon-notes"></i>
                        </span>
                        <h3 class="card-head-title">
                            使用品牌色
                        </h3>
                    </div>
                    <div class="card-head-toolbar">
                        <div class="card-head-actions">
                            <a href="#" class="btn btn-outline-light btn-pill btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-lock"></i>
                            </a>
                            <a href="#" class="btn btn-outline-light btn-pill btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-download-symbol"></i>
                            </a>
                            <a href="#" class="btn btn-outline-light btn-pill btn-sm btn-icon btn-icon-md">
                                <i class="flaticon2-rocket-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>